<script setup lang="ts">
import { AliwangwangOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

import { addressStore } from '#/store';
import { gotoAliiwanwan } from '#/utils';

import Addfrompage from './addfrompage.vue';
import AddresList from './addres-list.vue';

const address = addressStore();
const { showAddBoxState, activeKey, loading, selectSetItemInfoData } =
  storeToRefs(address);
</script>

<template>
  <div>
    <a-modal
      :body-style="{ height: '420px' }"
      :visible="showAddBoxState"
      title="地址库管理"
      width="800px"
      @cancel="showAddBoxState = false"
      @ok="address.addOrUpdateAddressApiFn"
    >
      <a-space v-if="showAddBoxState">
        <div>当前设置货源:</div>
        <div class="text-xs text-gray-500">
          {{ selectSetItemInfoData?.wangwangAccount }}
        </div>
        <a-button
          shape="round"
          size="small"
          type="link"
          @click="
            () => {
              gotoAliiwanwan(selectSetItemInfoData?.wangwangAccount);
            }
          "
        >
          <template #icon>
            <AliwangwangOutlined />
          </template>
        </a-button>
      </a-space>
      <a-spin :spinning="loading">
        <a-tabs v-model:active-key="activeKey">
          <a-tab-pane key="1" tab="地址库">
            <AddresList />
          </a-tab-pane>
          <a-tab-pane key="2" force-render tab="手动录入">
            <Addfrompage />
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </a-modal>
  </div>
</template>
